<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸识别管理系统</title>
    <!-- 引入 自定义样式 -->
    <link rel="stylesheet" href="static/css/styles.css">
    <!-- 引入 jQuery -->
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="system-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h3><i class="fas fa-user-shield"></i> 人脸识别</h3>
                <div class="version">v2.0.0</div>
            </div>
            <nav class="sidebar-nav">
                <a href="#dashboard" class="nav-item active" data-page="dashboard">
                    <i class="fas fa-tachometer-alt"></i> 仪表板
                </a>
                <a href="#recognition" class="nav-item" data-page="recognition">
                    <i class="fas fa-search"></i> 人脸识别
                </a>
                <a href="#video" class="nav-item" data-page="video">
                    <i class="fas fa-video"></i> 视频检测
                </a>
                <a href="#management" class="nav-item" data-page="management">
                    <i class="fas fa-users"></i> 人脸管理
                </a>
                <a href="#upload" class="nav-item" data-page="upload">
                    <i class="fas fa-upload"></i> 人脸入库
                </a>
                <a href="#debug" class="nav-item" data-page="debug">
                    <i class="fas fa-bug"></i> 调试工具
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="top-navbar">
                <div class="navbar-left">
                    <div class="navbar-title" id="pageTitle">仪表板</div>
                    <div class="navbar-breadcrumb" id="pageBreadcrumb">系统概览</div>
                </div>
                <div class="navbar-right">
                    <div class="system-status">
                        <span class="status-indicator"></span>
                        系统运行中
                    </div>
                    <div class="tooltip">
                        <i class="fas fa-bell" style="font-size: 18px; color: var(--text-secondary); cursor: pointer;"></i>
                        <span class="tooltiptext">通知中心</span>
                    </div>
                    <div class="tooltip">
                        <i class="fas fa-user-circle" style="font-size: 18px; color: var(--text-secondary); cursor: pointer;"></i>
                        <span class="tooltiptext">用户设置</span>
                    </div>
                </div>
            </div>

            <!-- 内容包装器 -->
            <div class="content-wrapper">
                <!-- 仪表板页面 -->
                {% include 'dashboard.html' %}

                <!-- 人脸识别页面 -->
                {% include 'recognition.html' %}

                <!-- 视频检测页面 -->
                {% include 'video.html' %}

                <!-- 人脸管理页面 -->
                {% include 'management.html' %}

                <!-- 人脸入库页面 -->
                {% include 'upload.html' %}

                <!-- 调试页面 -->
                {% include 'debug.html' %}
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="imageModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">人脸详情</div>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <img id="modalImage" src="" alt="人脸图片">
            </div>
        </div>
</div>

    <!-- 引入JavaScript文件 -->
    <script src="static/js/app.js"></script>
    <script src="static/js/recognition.js"></script>
    <script src="static/js/upload.js"></script>
    <script src="static/js/management.js"></script>
    <script src="static/js/video.js"></script>

<script>
        // 初始化视频检测
        $(document).ready(function() {
            // 初始化视频检测
            initVideoDetection();
        });
</script>

</body>
</html>